<template>
  <div class="container">
    <div class="compatibleBox">
      <el-card shadow="hover" class="box-card">
        <div slot="header" class="clearfix">
          <h3>关键风险分析</h3>
        </div>
        <div class="compatiblePreview">
          <Echarts
            :id="echartsKey"
            width="400px"
            height="250px"
            :options="option"
            :key="echartsKey"
          />
          <div class="compatiblePreviewRight">
            <ul>
              <li v-for="(item, index) in taskResult.riskItems[keyWord]" :key="index">
                {{ item }}
              </li>
            </ul>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import Echarts from "./echarts.vue";

export default {
  name: "MigrationReportDetails",
  components: { Echarts },
  props: ["datas", "keyWord"],
  data() {
    return {
      taskResult: null,
      echartsKey: null,
      option: {
        title: {
          text: "兼容率",
          subtext: "100%",
          left: "center",
          top: "38%",
          textStyle: {
            fontSize: 14,
            algin: "center",
            color: "#777",
          },
          subtextStyle: {
            fontFamily: "微软雅黑",
            fontSize: "24px",
          },
        },
        tooltip: {
          trigger: "item",
          top: "center",
          left: "center",
        },
        legend: {
          orient: "vertical",
          top: "0%",
          left: "right",
        },
        series: [
          {
            name: "兼容性",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 0, name: "兼容", itemStyle: { color: "#91CC75" } },
              { value: 0, name: "不兼容", itemStyle: { color: "#FF7070" } },
            ],
          },
        ],
      },
    };
  },
  created() {
    this.taskResult = JSON.parse(
      this.$props.datas.taskResult
    ).data.grammarResult;
    let percent =
      JSON.parse(this.$props.datas.taskResult).data.grammarResult
        .compatiblePercent[this.$props.keyWord] * 100;
    this.option.title.subtext = percent + "%";
    this.option.series[0].data[0].value = percent;
    this.option.series[0].data[1].value = 100 - percent;
    this.echartsKey = this.$props.keyWord;
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  margin: 20px 0;
  h3 {
    margin: 5px 0;
    color: #5c5c5c;
    font-weight: 600;
    font-size: 16px;
  }

  p {
    margin: 0;
    padding: 0;
  }

  .desc {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .box-card {
      width: 25%;
      margin: 20px;
      height: 200px;

      p {
        font-size: 14px;
      }
    }
  }
  .compatibleBox {
    width: 100%;

    .compatiblePreview {
      display: flex;
      .compatiblePreviewRight {
        width: 50%;
        padding-right: 30px;
        margin-left: 5%;

        ul {
          height: 100%;
          overflow: auto;
          margin: 0;
          li {
            margin: 10px 0;
            font-size: 16px;
            color: #666;
            font-weight: 600;
            letter-spacing: 2px;
            list-style-type: none;
            &::before {
              content: "◉";
              color: #e6a700;
              margin-right: 5px;
            }
          }
        }

        .compatiblePreviewRightText {
          margin-top: 10px;
          p {
            font-weight: 600;
            font-size: 28px;
            color: rgba(0, 0, 0, 0.6);
          }

          span {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.6);
            margin: 7px 0;
            display: block;
          }
        }
      }
    }
  }
}
</style>
